<template>
  <div class='big-screen-wrapper'>
    <img src="./index.jpg" alt="" style="width: 100% ;height: 100%">
    <div class='title-wrapper' style="display:none;">
      <div class='title'>大额支付预警模型</div>
      <div class='category'>
        <a-form layout='inline' style='display: flex;justify-content: space-between'>
          <a-form-item>
            <a-input @click='showSelectModel' :title='queryParam.depName' placeholder='单位'
                     v-model='queryParam.depName'></a-input>
          </a-form-item>
          <a-form-item>
            <a-input @click='showSelectModel' :title='queryParam.proName' placeholder='项目'
                     v-model='queryParam.proName'></a-input>
          </a-form-item>
          <a-form-item>
            <a-input @click='showSelectModel' :title='datetoSting' placeholder='时间'
                     v-model='datetoSting'></a-input>
          </a-form-item>
        </a-form>
        <!--        <a-button @click='showSelectModel'>查询</a-button>-->
      </div>
    </div>
    <div class='content-wrapper'>
      <div class='left-wrapper'>
        <div class='left-wrapper-1'>
          <div class='chart-title'>转账分析</div>
          <a-table :columns='leftWrapper1Cols' :data-source='leftWrapper1Data' :pagination='false'>
          </a-table>
        </div>
        <div class='left-wrapper-2'>
          <div class='chart-title'>对公转账总体情况(金额)统计...</div>
          <chartHalfPie
            v-if='leftWrapper2'
            :sourceChartOption='leftWrapper2'
          >
          </chartHalfPie>
        </div>
        <div class='left-wrapper3'>
          <div class='chart-title'>对公转账总体情况(数量)统计...</div>
          <chartPie
            v-if='leftWrapper3'
            :sourceChartOption='leftWrapper3'
          >
          </chartPie>
        </div>
      </div>
      <div :class="'middle-wrapper'">
        <div class='middle-wrapper-1'>
          <div class='title'></div>
          <a-table :columns='middleWrapper1Cols' :data-source='middleWrapper1Data' :pagination='false'>
          </a-table>
        </div>
        <div class='middle-wrapper-2'>
          <a-table :columns='middleWrapper2Cols' :data-source='middleWrapper2Data' :pagination='false'>
          </a-table>
        </div>
      </div>
      <div :class="'right-wrapper'">
        <div class='right-wrapper-1'>
          <div class='count'>
            <div class='item'>
              <div class='left'></div>
              <div class='right'>
                <div class='title'>总计</div>
                <div class='text-value'>{{ rightWrapperCount.money.sumMoney }}万</div>
              </div>
            </div>
            <div class='item'>
              <div class='left'></div>
              <div class='right'>
                <div class='title'>对私内部</div>
                <div class='text-value'>{{ rightWrapperCount.money.inMoney }}万</div>
              </div>
            </div>
            <div class='item'>
              <div class='left'></div>
              <div class='right'>
                <div class='title'>对私外部</div>
                <div class='text-value'>{{ rightWrapperCount.money.outMoney }}万</div>
              </div>
            </div>
          </div>
          <div class='chart-wrapper'>
            <chartStackBar
              v-if='rightWrapper1'
              :sourceChartOption='rightWrapper1'
            ></chartStackBar>
          </div>
        </div>
        <div class='right-wrapper-2'>
          <div class='count'>
            <div class='item'>
              <div class='left'></div>
              <div class='right'>
                <div class='title'>总计</div>
                <div class='text-value'>{{ rightWrapperCount.amount.sumAmount }}笔</div>
              </div>
            </div>
            <div class='item'>
              <div class='left'></div>
              <div class='right'>
                <div class='title'>对私内部</div>
                <div class='text-value'>{{ rightWrapperCount.amount.inAmount }}笔</div>
              </div>
            </div>
            <div class='item'>
              <div class='left'></div>
              <div class='right'>
                <div class='title'>对私外部</div>
                <div class='text-value'>{{ rightWrapperCount.amount.outAmount }}笔</div>
              </div>
            </div>
          </div>
          <div class='chart-wrapper'>
            <chartStackBar
              v-if='rightWrapper2'
              :sourceChartOption='rightWrapper2'
            ></chartStackBar>
          </div>
        </div>
      </div>
    </div>
    <select-model ref='selectModel' @getSelectData='getSelectData'></select-model>
  </div>
</template>

<script>
  import {chartPie, chartLine, chartStackLine, chartStackBar, chartHalfPie} from '@/components/BaseCharts/index'
  import {axios} from '@/utils/request'
  import * as lodash from 'lodash'
  import selectModel from '../selectModel'

  export default {
    name: 'index',
    components: {chartPie, chartLine, chartStackLine, chartStackBar, chartHalfPie, selectModel},
    data() {
      return {
        datetoSting: '',
        queryParam: {proId: '', depId: '', date: []},
        leftWrapper1Cols: [
          {
            title: '类型',
            dataIndex: 'transferTypeText'
          },
          {
            title: '数量',
            dataIndex: 'amount'
          },
          {
            title: '金额',
            dataIndex: 'payMoney'
          },
          {
            title: '总体金额',
            dataIndex: 'maxPayMoney'
          }
        ],
        leftWrapper1Data: [],
        leftWrapper2: {
          chartType: 'chartPie',
          refID: `leftWrapper3`,
          series: [
            {data: [0], name: '信息系统'},
            {data: [36], name: '贯彻落实国家重大安全策略'},
            {data: [8], name: '委托外包项目'},
            {data: [3], name: '内控制度'},
            {data: [3], name: '管理绩效'},
            {data: [3], name: '财务结算'},
            {data: [23], name: '经济责任'}
          ]
        },
        leftWrapper3: {
          chartType: 'chartPie',
          refID: `leftWrapper3`,
          text: '',
          subText: '',
          y: '55%',
          series: [
            {data: [0], name: '信息系统'},
            {data: [36], name: '贯彻落实国家重大安全策略'},
            {data: [8], name: '委托外包项目'},
            {data: [3], name: '内控制度'},
            {data: [3], name: '管理绩效'},
            {data: [3], name: '财务结算'},
            {data: [23], name: '经济责任'}
          ]
        },
        middleWrapper1Cols: [
          {
            title: '',
            dataIndex: 'title'
          },
          {
            title: '1月',
            dataIndex: '1'
          },
          {
            title: '2月',
            dataIndex: '2'
          },
          {
            title: '3月',
            dataIndex: '3'
          },
          {
            title: '4月',
            dataIndex: '4'
          },
          {
            title: '5月',
            dataIndex: '5'
          },
          {
            title: '6月',
            dataIndex: '6'
          },
          {
            title: '7月',
            dataIndex: '7'
          },
          {
            title: '8月',
            dataIndex: '8'
          },
          {
            title: '9月',
            dataIndex: '9'
          },
          {
            title: '10月',
            dataIndex: '10'
          },
          {
            title: '11月',
            dataIndex: '11'
          },
          {
            title: '12月',
            dataIndex: '12'
          }
        ],
        middleWrapper1Data: [
          {
            'title': '金额(万元)',
            '1': '1',
            '2': '1',
            '3': '1',
            '4': '1',
            '5': '1',
            '6': '1',
            '7': '1',
            '8': '1',
            '9': '1',
            '10': '1',
            '11': '1',
            '12': '1'
          },
          {
            'title': '总计(笔)',
            '1': '1',
            '2': '1',
            '3': '1',
            '4': '1',
            '5': '1',
            '6': '1',
            '7': '1',
            '8': '1',
            '9': '1',
            '10': '1',
            '11': '1',
            '12': '1'
          }
        ],
        middleWrapper2Cols: [
          {
            title: '序号',
            dataIndex: 'index'
          },
          {
            title: '名称',
            dataIndex: 'accountName'
          },
          {
            title: '类型',
            dataIndex: 'transferTypeText'
          },
          {
            title: '金额(万元)',
            dataIndex: 'payMoney'
          },
          {
            title: '数量(笔)',
            dataIndex: 'amount'
          }

        ],
        middleWrapper2Data: [],
        rightWrapperCount: {
          'amount': {'outAmount': 0, 'inAmount': 0, 'sumAmount': 0},
          'money': {'sumMoney': 0, 'outMoney': 0, 'inMoney': 0}
        },
        rightWrapper1: {
          chartType: 'chartBar',
          refID: `rightWrapper1`,
          text: '',
          subText: '',
          xAxis: ['工资', '年终奖', '股票分红', '报销', '辞退补偿'],
          series: [
            {name: '审计项目计划数', data: [120, 132, 101, 134, 90, 230, 120, 132, 101, 134, 90, 230], notStack: true},
            {name: '实际实施数', data: [220, 182, 191, 234, 290, 330, 220, 182, 191, 234, 290, 330], notStack: true}
          ]
        },
        rightWrapper2: {
          chartType: 'chartBar',
          refID: `rightWrapper2`,
          text: '',
          subText: '',
          xAxis: ['工资', '年终奖', '股票分红', '报销', '辞退补偿'],
          series: [
            {name: '审计项目计划数', data: [120, 132, 101, 134, 90, 230, 120, 132, 101, 134, 90, 230], notStack: true},
            {name: '实际实施数', data: [220, 182, 191, 234, 290, 330, 220, 182, 191, 234, 290, 330], notStack: true}
          ]
        }
      }
    },
    created() {
    },
    mounted() {
      this.showSelectModel()
    },
    methods: {
      showSelectModel() {
        let data = lodash.cloneDeep(this.payload)
        data.date = [data.startTime, data.endTime]
        data.proId = data.businessId
        this.$refs.selectModel.edit(data)
      },
      deepCopy(data) {
        return JSON.parse(JSON.stringify(data))
      },
      getSelectData(data) {
        this.queryParam = data
        this.datetoSting = this.queryParam.date.toString()
        if (Array.isArray(this.queryParam.date) && this.queryParam.date.length === 2) {
          this.payload = {
            businessId: this.queryParam.proId,
            proName: this.queryParam.proName,
            depName: this.queryParam.depName,
            depId: this.queryParam.depId,
            startTime: this.queryParam.date[0],
            endTime: this.queryParam.date[1],
          }
          this.handleProjectChange(this.payload)
        }
      },
      handleProjectChange(payload) {
        this.fetchLeft1(payload)
        this.fetchLeft2(payload)
        this.fetchLeft3(payload)
        this.fetchRight1(payload)
        this.fetchRight2(payload)
        this.fetchMiddle1(payload)
        // this.fetchMiddle2(payload)
      },
      fetchData() {
        const payload = {
          transferYear: '2021',
          startMonth: '1',
          endMonth: '12'
        }
        this.fetchLeft1(payload)
        this.fetchLeft2(payload)
        this.fetchLeft3(payload)
        this.fetchMiddle1(payload)
        this.fetchMiddle2(payload)
        this.fetchRightCount(payload)
        this.fetchRight1(payload)
        this.fetchRight2(payload)

      },
      async fetchLeft1(payload) {
        const ret = await axios.get('/modelPay/analysis', {
          params: {
            ...payload
          }
        })
        if (ret.success) {
          this.leftWrapper1Data = ret.result
        }
      },
      async fetchLeft2(payload) {
        const ret = await axios.get('/modelPay/leftConditionStatistics', {
          params: {
            ...payload,
            transferType: 1
          }
        })
        if (ret.success) {
          let {result} = ret
          const dataShadow = lodash.cloneDeep(this.leftWrapper2)
          let series = []
          if (Array.isArray(result)) {
            series = result.reduce((acc, cur) => {
              acc.push({
                name: cur.payType,
                data: [cur.payMoney]
              })
              return acc
            }, [])
          }
          dataShadow.series = series
          this.leftWrapper2 = null
          setTimeout(() => {
            this.leftWrapper2 = dataShadow
          }, 100)
        }

      },
      async fetchLeft3(payload) {
        const ret = await axios.get('/modelPay/leftConditionStatistics', {
          params: {
            ...payload,
            transferType: 1
          }
        })
        if (ret.success) {
          let {result} = ret
          const dataShadow = lodash.cloneDeep(this.leftWrapper3)
          let series = []
          if (Array.isArray(result)) {
            series = result.reduce((acc, cur) => {
              acc.push({
                name: cur.payType,
                data: [cur.amount]
              })
              return acc
            }, [])
          }
          dataShadow.series = series
          this.leftWrapper3 = null
          setTimeout(() => {
            this.leftWrapper3 = dataShadow
          }, 100)
        }
      },
      async fetchMiddle1(payload) {

        const ret = await axios.get('/modelPay/monthList', {
          params: {
            ...payload
          }
        })
        if (ret.success) {
          const {result: {monthList, moneyList, amountList}} = ret
          const row1 = {
            'title': '金额(万元)'
          }
          const row2 = {
            'title': '总计(笔)'
          }
          monthList.forEach((month, index) => {

            row1[month] = moneyList[index]
            row2[month] = amountList[index]

          })
          this.middleWrapper1Data = [row1, row2]
        }
      },
      async fetchMiddle2(payload) {
        const ret = await axios.get('/modelPay/detailList', {
          params: {
            ...payload
          }
        })
        if (ret.success) {
          ret.result.records.forEach((item, index) => {
            item.index = index + 1
          })
          this.middleWrapper2Data = ret.result.records
        }
      },
      async fetchRightCount(payload) {
        const ret = await axios.get('/modelPay/transferCondition', {
          params: {
            ...payload,
            transferType: 1
          }
        })
        if (ret.success) {
          this.rightWrapperCount = ret.result
        }
      },
      async fetchRight1(payload) {
        const ret = await axios.get('/modelPay/rightConditionStatistics', {
          params: {
            ...payload
          }
        })
        if (ret.success) {
          let {result: {money: {inMoney, outMoney}}} = ret
          const dataShadow = lodash.cloneDeep(this.rightWrapper1)
          let series = []
          // if (Array.isArray(result)) {
          //   series = result.reduce((acc, cur) => {
          //     acc.push({
          //       name: cur.payType,
          //       data: [cur.payMoney]
          //     })
          //     return acc
          //   }, [])
          // }
          const inDataList = inMoney.dataList || [0]
          const outDataList = outMoney.dataList || [0]
          series = [
            {
              name: '对内', data: [...inDataList], notStack: true
            },
            {
              name: '对外', data: [...outDataList], notStack: true
            }
          ]
          dataShadow.series = series
          this.rightWrapper1 = null
          setTimeout(() => {
            this.rightWrapper1 = dataShadow
          }, 100)
        }
      },
      async fetchRight2(payload) {
        const ret = await axios.get('/modelPay/rightConditionStatistics', {
          params: {
            ...payload
          }
        })
        if (ret.success) {
          let {result: {amount: {inAmount, outAmount}}} = ret
          const dataShadow = lodash.cloneDeep(this.rightWrapper2)
          let series = []
          // if (Array.isArray(result)) {
          //   series = result.reduce((acc, cur) => {
          //     acc.push({
          //       name: cur.payType,
          //       data: [cur.payMoney]
          //     })
          //     return acc
          //   }, [])
          // }
          const inDataList = inAmount.dataList || [0]
          const outDataList = outAmount.dataList || [0]
          series = [
            {
              name: '对内', data: [...inDataList], notStack: true
            },
            {
              name: '对外', data: [...outDataList], notStack: true
            }
          ]
          dataShadow.series = series
          this.rightWrapper2 = null
          setTimeout(() => {
            this.rightWrapper2 = dataShadow
          }, 100)
        }
      }


    }
  }
</script>

<style scoped lang='less'>
  .ant-table-wrapper {
    width: 100%;
    background: transparent;

    ::v-deep {
      .ant-table-tbody {
        tr {
          td {
            color: white;
          }
        }
      }

      .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
        background: rgba(255, 255, 255, 0.4);
        color: black !important;
      }

      .ant-table-placeholder {
        background: transparent;
        border: none;

        * {
          color: white;
        }
      }

      .ant-spin-nested-loading {
        width: 100%;

        th, td {
          border-bottom: none;
        }

        .ant-table-thead {
          background-color: rgba(48, 106, 117, 0.6);
          height: 30px;
          line-height: 0.3;
          color: white;

          * {
            background: transparent;
            color: white;
          }
        }
      }
    }

  }

  .big-screen-wrapper {
    width: 100%;
    height: calc(100% - 0px);
    background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: column;


    .title-wrapper {
      background: url(~@/assets/hgxjc/lwdwyj/title1.png) no-repeat;
      background-size: contain;
      position: relative;
      width: 100%;
      height: 110px;
      display: flex;
      align-content: center;
      justify-content: flex-start;
      flex-direction: column;
      padding-top: 1vw;
      flex-shrink: 0;

      & > * {
        text-align: center;
        font-size: 1vw;
        background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;
      }

      & > .title {
        font-size: 1.3vw;
      }


      & > .category {
        margin-top: 0.1vw;
        width: 700px;
        margin: 0 auto;

        /deep/ * {
          background: transparent !important;
        }

        /deep/ .ant-input {
          border: 1px solid #13D4D5;
          color: #13D4D5;
        }
      }
    }

    .content-wrapper {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      overflow: hidden;

      & > div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;


        &.right-wrapper1 {
          background: url(~@/assets/hgxjc/lwdwyj/right.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }

        &.middle-wrapper2 {
          flex: 1.5;
          background: url(~@/assets/hgxjc/lwdwyj/middle2.png) no-repeat;
          background-size: contain;
          background-position: center center;
          position: relative;
        }

        &.right-wrapper2 {
          background: url(~@/assets/hgxjc/lwdwyj/right2.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }

        &.left-wrapper {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding-left: 16px;

          & > div {
            margin: 4px 0;
            background-color: rgba(78, 78, 78, 0.3);
          }

          .chart-title {
            background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            margin-top: 0.2vw;
            margin-left: 0.2vw;
            font-size: 0.8vw;
            font-weight: bold;
            left: 0;
            top: 0;
          }

          & > div {
            width: 100%;
            height: 100%;
            flex: 1;
            flex-shrink: 0;
            position: relative;

          }

          & > div {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-direction: column;
            width: 100%;

            &:nth-child(2) {
              flex-grow: 1;
            }
          }
        }

        &.middle-wrapper {
          flex: 1.5;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding-left: 16px;
          width: 100%;

          & > div {
            margin: 4px 0;
            background-color: rgba(78, 78, 78, 0.3);
          }

          .middle-wrapper-1 {
            background: url(~@/assets/hgxjc/dezfyjmx/middleBg.png) no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 180px;
            flex-shrink: 0;
            position: relative;
            padding: 10px 40px;
            padding-top: 30px;

            ::v-deep {
              .ant-table-body {
                tr {
                  td:first-child {
                    font-size: 8px;
                    height: 50px;
                    width: 30px;
                    overflow: hidden;
                  }
                }

                td {
                  padding: 0 0;
                  text-align: center;
                }
              }
            }

            .title {
              height: 40px;
              background: url(~@/assets/hgxjc/dezfyjmx/middleTitle.png) no-repeat;
              background-size: 100% 100%;
              position: absolute;
              top: 20px;
              left: 20px;
              z-index: 1;
              width: calc(100% - 40px);
            }

            .ant-table-wrapper {
              height: 140px;
              overflow: hidden;

              .ant-empty-image {
                display: none;
              }
            }

          }

          .middle-wrapper-2 {
            width: 100%;
            flex-grow: 1;

          }
        }

        &.right-wrapper {
          flex: 1;
          flex-direction: column;
          padding-left: 16px;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;
          height: 100%;
          overflow: hidden;

          & > div {
            margin: 4px 0;
            background-color: rgba(78, 78, 78, 0.3);
          }

          & > div {
            flex: 1;
            flex-shrink: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .chart-wrapper {
              width: 100%;
              flex-grow: 1;
            }


          }

          .right-wrapper-1 {
            .count {
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              width: 460px;

              & > .item {
                flex: auto;
                display: flex;
                align-content: center;
                justify-content: flex-start;
                height: 60px;

                .left {
                  width: 65px;

                }

                .right {
                  display: flex;
                  align-items: flex-start;
                  justify-content: flex-start;
                  flex-direction: column;
                  height: 65px;
                  padding: 5px 0;

                  & > div {
                    flex: 1;

                  }

                  .text-value {
                    font-size: 18px;
                    background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
                    background-clip: text;
                    -webkit-background-clip: text;
                    color: transparent;
                  }
                }

                &:nth-child(1) {
                  background: url(~@/assets/hgxjc/dezfyjmx/icon1.png) no-repeat;
                  background-size: 100% 100%;
                  background-position: center;
                }

                &:nth-child(2) {
                  background: url(~@/assets/hgxjc/dezfyjmx/icon2.png) no-repeat;
                  background-size: 100% 100%;
                  background-position: center;
                }

                &:nth-child(3) {
                  background: url(~@/assets/hgxjc/dezfyjmx/icon3.png) no-repeat;
                  background-size: 100% 100%;
                  background-position: center;
                }
              }
            }
          }

          .right-wrapper-2 {
            .count {
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              width: 460px;

              & > .item {
                flex: auto;
                display: flex;
                align-content: center;
                justify-content: flex-start;
                height: 60px;

                .left {
                  width: 65px;

                }

                .right {
                  display: flex;
                  align-items: flex-start;
                  justify-content: flex-start;
                  flex-direction: column;
                  height: 65px;
                  padding: 5px 0;

                  & > div {
                    flex: 1;

                  }

                  .text-value {
                    font-size: 18px;
                    background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
                    background-clip: text;
                    -webkit-background-clip: text;
                    color: transparent;
                  }
                }

                &:nth-child(1) {
                  background: url(~@/assets/hgxjc/dezfyjmx/icon4.png) no-repeat;
                  background-size: 100% 100%;
                  background-position: center;
                }

                &:nth-child(2) {
                  background: url(~@/assets/hgxjc/dezfyjmx/icon5.png) no-repeat;
                  background-size: 100% 100%;
                  background-position: center;
                }

                &:nth-child(3) {
                  background: url(~@/assets/hgxjc/dezfyjmx/icon6.png) no-repeat;
                  background-size: 100% 100%;
                  background-position: center;
                }
              }
            }
          }
        }
      }
    }
  }
</style>